<template>
	<view class="time-range-form">
		<form @submit="formSubmit">
			<!-- 运营时间显示 -->
			<view class="bg-white p-0-30 f30">
				<view class="d-s-c border-b-d9">
					<text class="key-name">运营时间</text>
					<view class="input-box flex-1" style="padding: 30rpx 20rpx;" @tap="showTimePicker">
						{{ timeRange || '00:00 - 00:00' }}
					</view>
				</view>
			</view>
			<!-- 保存按钮 -->
			<view class="p30">
				<button form-type="submit" class="theme-btn f32 mt60 addBtn">保存</button>
			</view>
		</form>

		<!-- 原生弹窗（替代uni-popup） -->
		<!-- 遮罩层 -->
		<view class="popup-mask" v-if="showPicker" @click="closePopup"></view>
		<!-- 弹窗内容 -->
		<view class="popup-container" v-if="showPicker">
			<!-- 弹窗头部 -->
			<view class="picker-header">
				<text class="cancel" @click="closePopup">取消</text>
				<text class="title">选择时间范围</text>
				<text class="confirm" @click="confirmTime">确定</text>
			</view>

			<!-- 时间选择器内容 -->
			<view class="picker-content">
				<picker-view :value="pickerValue" @change="onPickerChange" indicator-style="height: 60rpx; "
					style="width: 100%; height: 300rpx;">
					<!-- 开始时间列 -->
					<picker-view-column>
						<view class="time-item" v-for="time in timeList" :key="time">{{ time }}</view>
					</picker-view-column>
					<!-- 分隔符 -->
					<picker-view-column>
						<view class="separator" v-for="(item, index) in timeList.length" :key="index">—</view>
					</picker-view-column>
					<!-- 结束时间列 -->
					<picker-view-column>
						<view class="time-item" v-for="time in timeList" :key="time">{{ time }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPicker: false, // 控制弹窗显示（替代uni-popup的v-model）
				timeList: [],
				pickerValue: [0, 0, 1439], // 初始选择 00:00 - 23:59
				startTime: '00:00',
				endTime: '23:59'
			};
		},
		computed: {
			timeRange() {
				return `${this.startTime} - ${this.endTime}`;
			}
		},
		created() {
			this.generateTimeList();
		},
		methods: {
			// 生成00:00~23:59的时间列表
			generateTimeList() {
				for (let hour = 0; hour < 24; hour++) {
					for (let minute = 0; minute < 60; minute++) {
						const h = hour.toString().padStart(2, '0');
						const m = minute.toString().padStart(2, '0');
						this.timeList.push(`${h}:${m}`);
					}
				}
			},
			// 显示弹窗（替代uni-popup的open()）
			showTimePicker() {
				this.showPicker = true;
			},
			// 关闭弹窗（替代uni-popup的close()）
			closePopup() {
				this.showPicker = false;
			},
			// 选择器值变化
			onPickerChange(e) {
				const [startIndex, , endIndex] = e.detail.value;
				this.startTime = this.timeList[startIndex];
				this.endTime = this.timeList[endIndex];
				this.pickerValue = e.detail.value;
			},
			// 确认时间选择
			confirmTime() {
				if (this.compareTime(this.startTime, this.endTime) > 0) {
					uni.showToast({
						title: '开始时间不能晚于结束时间',
						icon: 'none'
					});
					return;
				}
				this.closePopup();
			},
			// 比较时间
			compareTime(a, b) {
				const timeA = a.split(':').join('');
				const timeB = b.split(':').join('');
				return timeA > timeB ? 1 : timeA < timeB ? -1 : 0;
			},
			// 提交表单
			/*提交*/
			formSubmit: function(e) {
				let self = this;
				self._post('user.agent/setStoreTime', {
					store_business_hours: this.startTime+'-'+this.endTime
				}, function(res) {
					self.showSuccess(res.msg, function() {
						// #ifndef H5
						uni.navigateBack({
							delta: parseInt(self.delta)
						});
						// #endif
						// #ifdef H5
						history.go(-self.delta);
						// #endif
					});
				});
			},
		}
	};
</script>

<style scoped>
	/* 基础样式（与原有保持一致） */
	.time-range-form {
		background-color: #FFFFFF;
	}

	.d-s-c {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}

	.key-name {
		width: 160rpx;
		font-size: 32rpx;
		padding-left: 30rpx;
	}

	.border-b-d9 {
		border-bottom: 1rpx solid #d9d9d9;
	}

	.input-box {
		font-size: 30rpx;
		color: #333;
		padding-right: 30rpx;
		flex: 1;
		text-align: right;
	}

	.p30 {
		padding: 30rpx;
	}

	.theme-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-color: #3cb371;
		color: #fff;
		font-size: 32rpx;
	}

	/* 原生弹窗样式（核心替代部分） */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
		/* 遮罩层层级 */
		animation: maskFadeIn 0.3s;
	}

	.popup-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		z-index: 999;
		/* 弹窗层级高于遮罩 */
		animation: slideUp 0.3s;
	}

	/* 弹窗动画 */
	@keyframes maskFadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	/* 弹窗内部样式（与原有保持一致） */
	.picker-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.cancel {
		color: #666;
		font-size: 32rpx;
	}

	.confirm {
		color: #007aff;
		font-size: 32rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: 500;
	}

	.picker-content {
		padding: 10rpx 0;
	}

	.time-item {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.separator {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999;
	}
</style>